<template>
  <div class="myhotel">
    <div class="myhotel-header">
      <div class="myhotel-header-img">
        <img
          src="https://css.mafengwo.net/mobile/images/header/logo2.png"
          alt=""
        />
      </div>
      <ul class="myhotel-header-ul">
        <li @click="gototoshouye">官网首页</li>
        <li><van-icon name="search" color="#ffa800" size="28" /></li>
      </ul>
    </div>

    <div class="myhotel-citys">
      <ul>
        <li class="myhotel-citys-li2">目的地</li>
        <li class="myhotel-citys-li1">
          <input
            type="text"
            placeholder="目的地/城市"
            v-model="addresvalue"
            @click="gotoaddress"
          />
          <div class="myhotel-citys-li1-div1">
            <span><van-icon name="location-o" size="20" /></span>
            <span>我的位置</span>
          </div>
        </li>
      </ul>
    </div>

    <van-cell is-link @click="showPopup">
      <div class="myhotel-choose">
        <div class="myhotel-choose-left">
          <p>入住/离店</p>
          <p>{{ zidate }}</p>
        </div>
        <div class="myhotel-choose-center">
          <p>时长</p>
          <p>{{ zitianshu }}晚</p>
        </div>
        <div class="myhotel-choose-right">
          <p>每间</p>
          <p>{{ maxvalue11 }}成人,{{ minvalue11 }}儿童</p>
        </div>
      </div>
    </van-cell>

    <van-popup
      class="van-popup"
      v-model:show="show"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="popup">内容</div>

      <div class="collapse">
        <div class="collapse-maxmin">
          <span>{{ maxvalue11 }}成人 {{ minvalue11 }}儿童</span>
        </div>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="每间房住" name="1">
            <div>
              <span>成人</span
              ><van-stepper v-model="maxvalue" @change="maxren" />
            </div>
            <div>
              <span>儿童</span
              ><van-stepper
                @minus="nljian"
                v-model="minvalue"
                min="0"
                max="4"
                @change="minren"
              />
            </div>

            <!-- //儿童年龄段 -->
            <div v-if="etshow1">
              <childrennl1></childrennl1>
            </div>
            <div v-if="etshow2">
              <childrennl2></childrennl2>
            </div>
            <div v-if="etshow3">
              <childrennl3></childrennl3>
            </div>
            <div v-if="etshow4">
              <childrennl4></childrennl4>
            </div>
          </van-collapse-item>

          <!-- //日历 -->
          <div>
            <rili></rili>
          </div>
        </van-collapse>
      </div>
    </van-popup>

    <div class="myhotel-checkhotel" @click="gototohoteldetail">
      <p>查看酒店</p>
    </div>
  </div>
</template>

<script>
import childrennl1 from "@/guide/hotel/childrennl1.vue";
import childrennl2 from "@/guide/hotel/childrennl2.vue";
import childrennl3 from "@/guide/hotel/childrennl3.vue";
import childrennl4 from "@/guide/hotel/childrennl4.vue";
import rili from "@/guide/hotel/rili.vue";
export default {
  components: {
    childrennl1,
    childrennl2,
    childrennl3,
    childrennl4,
    rili,
  },
  data() {
    return {
      zitianshu: "",
      zidate: "",
      //选择的城市
      addresvalue: "",
      //默认不弹出
      show: false,
      //点击打开抽屉1个
      activeNames: [1],
      //儿童限制
      minvalue: 0,
      //成人限制
      maxvalue: 1,
      //成人数据
      maxvalue11: "1",
      //儿童数据
      minvalue11: "0",
      //儿童年龄是否显示
      etshow1: false,
      etshow2: false,
      etshow3: false,
      etshow4: false,
    };
  },
  watch: {
    minvalue(newval) {
      if (newval > 0) {
        this.etshow1 = true;
      }
      if (newval > 1) {
        this.etshow2 = true;
      }
      if (newval > 2) {
        this.etshow3 = true;
      }
      if (newval > 3) {
        this.etshow4 = true;
      }
    },
  },
  methods: {
    nljian() {
      if (this.minvalue == 1) {
        this.etshow1 = false;
        this.etshow2 = false;
        this.etshow3 = false;
        this.etshow4 = false;
      }
      if (this.minvalue == 2) {
        this.etshow2 = false;
        this.etshow3 = false;
        this.etshow4 = false;
      }
      if (this.minvalue == 3) {
        this.etshow3 = false;
        this.etshow4 = false;
      }
      if (this.minvalue == 4) {
        this.etshow4 = false;
      }
    },
    gotoaddress() {
      this.$router.push("/address");
    },
    showPopup() {
      this.show = true;
    },
    //成人的值
    maxren() {
      this.maxvalue11 = this.maxvalue;
    },
    //儿童数据
    minren() {
      this.minvalue11 = this.minvalue;
    },
    //去首页官网
    gototoshouye() {
      this.$router.push("/home");
    },
    //去酒店详情
    gototohoteldetail(){
      this.$router.push("/hoteldetail")
      this.$bus.emit("getaddresvalue",this.addresvalue)
    }
  },
  mounted() {
    this.addresvalue = this.$store.state.addressvalue;
    this.$bus.on("getdatedata", (val1) => {
      this.zidate = val1;
    }),
      this.$bus.on("gettianshudata", (val2) => {
        this.zitianshu = val2;
      });
  },
  provide() {
    return {
      //获取大人值
      key1: () => this.maxvalue11,
      // 获取小孩值
      key2: () => this.minvalue11,
      //取反关闭弹出层
      key3: () => (this.show = !this.show),
    };
  },
};
</script>

<style lang="scss" scoped>
.myhotel {
  width: 375px;
  &-header {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    &-img {
      img {
        width: 108px;
        height: 28px;
        padding: 10px 15px;
      }
    }
    &-ul {
      display: flex;
      li {
        color: #ffa800;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        padding: 0px 10px;
      }
    }
  }
  &-citys {
    height: 64px;
    width: 100%;
    &-li1 {
      display: flex;
      justify-content: space-around;
      &-div1 {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    &-li2 {
      padding-left: 27px;
    }
  }
  &-choose {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid gray;
    display: flex;
    justify-content: space-around;
  }

  .van-popup {
    width: 375px;
    .popup {
      width: 100%;
      text-align: center;
    }
    .collapse {
      margin-top: 40px;
      &-maxmin {
        z-index: 4;
        position: fixed;
        right: 50px;
        top: 70px;
      }
    }
  }
  .queren {
    width: 300px;
    height: 50px;
    border: 50px;
    background-color: #ffdb00;
    p {
      font-size: 12px;
    }
  }
  &-checkhotel {
    width: 335px;
    height: 50px;
    background-color: #ffa800;
    margin-left: 20px;
    p {
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
